import { Checkbox, RadioGroup, Radio, Pagination } from 'tdesign-react'
import Empty from '@/components/Empty'
import type { CheckboxOptionObj } from 'tdesign-react'
import '../index.less'

const SelectionsPanel = (props: any) => {
  const {
    multiple = false,
    onCheckboxChange = () => { },
    onRadioChange = () => { },
    selectedValue = [],
    displayOptions = [],
    dictionaryTitle = [],
    total = 0,
    pageChangedCallback = () => { },
  } = props

  const checkAllOption: CheckboxOptionObj = { label: '全选', checkAll: true }

  const getCheckboxDisplayOptions = () => {
    if (displayOptions.length > 0 && multiple) {
      let _options = []
      displayOptions.map((dictionaryItem: any) => {
        _options.push({
          label: dictionaryItem[dictionaryTitle[0].labelKey] || undefined,
          value: dictionaryItem[dictionaryTitle[0].valueKey] || undefined,
          children: dictionaryTitle.map((titleItem: any, titleIndex: number) => {
            return <div className='aio-checkbox-show-label' key={titleIndex}>{dictionaryItem[titleItem.labelKey]}</div>
          })
        })
      })
      _options.unshift(checkAllOption)
      return _options
    } else {
      return []
    }
  }

  const onPageChange = (pageInfo: PageInfo) => {
    pageChangedCallback(pageInfo)
  }

  return <div className='aio-form-item-search-select-selections-panel'>
    {displayOptions.length > 0 ?<>
      <div className='aio-form-selections-panel-items-header'>
        <label style={{ width: '30px' }}></label>
        {dictionaryTitle.map((item: any, index: number) => {
          return <div className='t-panel-selection-header-item' key={index}>
            {item.label}
          </div>
        })}
      </div>
      {multiple ?
        <Checkbox.Group
          value={selectedValue} // ['1', '2', '3']
          options={getCheckboxDisplayOptions()}
          className='aio-form-selections-panel-checkbox-group'
          onChange={onCheckboxChange}
        >
        </Checkbox.Group> : <RadioGroup
          value={selectedValue[0]} // '1'
          className='aio-form-selections-panel-radio-group'
          onChange={onRadioChange}
        >
          {displayOptions.map((dictionaryItem: any, index: number) => {
            return <Radio className='aio-form-selections-panel-radio-group-item'
              value={dictionaryItem[dictionaryTitle[0].valueKey]}
              key={index}>
                {dictionaryTitle.map((titleItem: any, titleIndex: number) => {
                  return <div className='aio-radio-show-label' key={titleIndex}>{dictionaryItem[titleItem.labelKey]}</div>
                })}
              </Radio>
          })}
        </RadioGroup>
      }
      <Pagination
        showPageNumber
        showPageSize={false}
        pageSize={5}
        showPreviousAndNextBtn
        // foldedMaxPageBtn={2}
        // maxPageBtn={1}
        pageEllipsisMode='mid'
        size='small'
        theme='default'
        total={total}
        totalContent={`共 ${total} 条`}
        onChange={onPageChange}
      /></> : <Empty />
    }
  </div>
}

export default SelectionsPanel
